import { RefObject, useRef, useState } from "react";

interface ScrollCardProps{
    pageRef: RefObject<HTMLDivElement>;
    isScroll: boolean;
    scrollTop: () => void;
    scroll: () => void;
  }
/**
 * 提供一个回到页面顶部的功能组件。
 * 
 * @returns {ScrollCardProps} 返回一个包含 pageRef、isScroll、scrollTop 和 scroll 属性的对象。
 */
export default function useBackTop():ScrollCardProps{

    // 使用 useRef 来创建一个对 HTMLDivElement 的引用
    const pageRef = useRef<HTMLDivElement>(null)
    // 使用 useState 来控制滚动状态
    const [isScroll,setIsScroll] = useState(false)
    
    /**
     * 刷新页面至顶部。
     * @returns {boolean} 如果当前没有 pageRef 对象，则返回 false。
     */
    const scrollTop = () => {
        if(!pageRef.current) return false
      setIsScroll(false) // 重置滚动状态
      pageRef.current&&pageRef.current.scrollTo(0, 0); // 执行滚动操作
    };
    
    /**
     * 监听滚动事件，并根据滚动位置更新 isScroll 状态。
     */
    const scroll = () => {
        if(!pageRef.current){
         return // 如果没有 pageRef 对象，则不执行任何操作
        }
      const scrollTop = pageRef.current.scrollTop;
      setIsScroll(scrollTop > 100) // 根据滚动距离判断是否显示回到顶部按钮
    };
    
    // 返回相关属性和方法
    return {
      pageRef,
      isScroll,
      scrollTop,
      scroll,
    };
}
export type {ScrollCardProps}